<template>
    <My_live :danmu="data.danmu" ref="accountRef" @handleAnimation="handleAnimation">
        <template v-slot:video>
            <video id="myvideo" @click="playLive"></video>
        </template>
        <template v-slot:uni-form>
            <div class="uni-form-item uni-column">
                <input v-model="inputValue" class="uni-input" focus placeholder="和主播聊聊..." />
                <text class="text" @click="onSend()">发送</text>
            </div>
        </template>
    </My_live>
</template>
<!-- const [data,setData] = useState() -->
<script setup lang="ts">
import My_live from '../../components/live.vue'
import { ref, reactive, onBeforeUnmount,onMounted } from 'vue'
import { useCounterStore } from '../../stores'
import flv from 'flv.js'
const { name, heade } = useCounterStore()
const accountRef = ref()
const data = reactive({
    danmu: [
        {
            id: 'a2',
            name: '李四',
            comment: '你好',
            img: 'http://10.31.71.52:7002/public/static/c1.png'
        },
        {
            id: 'a1',
            name: '张三',
            comment: '来啦老弟',
            img: 'http://10.31.71.52:7002/public/static/c2.png'
        },
        {
            id: 'a3',
            name: '王五',
            comment: '哈喽',
            img: 'http://10.31.71.52:7002/public/static/c3.png'
        },
    ],
    name:''
})
// 获取姓名
const inputValue = ref('')
const socket = new WebSocket('ws://10.31.71.55:8000/' + '张三',)
socket.addEventListener('open', () => {
    console.log('欢迎来到聊天室');
})
socket.addEventListener('message', (res) => {
    //div.innerText = e.data //这种方法会覆盖原先的数据
    console.log('收到服务器内容：' + res.data);
    data.danmu.push({
        id: getUuid(),
        ...JSON.parse(res.data)
    })
})
//离开页面退出聊天室
onBeforeUnmount(() => {
    socket.close()
})
onkeydown = (e) => {
    if (e.code === 'Enter') {
        console.log('点击了确定发送');
    }
}
// 发送
const onSend = (naems:string=name,value:string=inputValue.value) => {
    accountRef.value?.loginAction()
    socket.send(JSON.stringify({
        name:naems,
        comment: value,
        img: heade,
    }))
    if(data.danmu.length>=10){
        data.danmu.shift()
    }
    inputValue.value = ''
}
// 生成随机id
const getUuid = () => {
    var s = [];
    var hexDigits = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
    for (var i = 0; i < 16; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
    }
    let uuid = s.join("")
    return uuid
}

// 直播
let player: flv.Player
if (flv.isSupported()) {
	player = flv.createPlayer({
		type: 'flv',
		url: 'http://10.31.71.55:9000/live/.flv',
		isLive: true,
		enableWorker: true , //启用 Web Worker 进程来加速视频的解码和处理过程
		enableStashBuffer: false, // 启用数据缓存机制，提高视频的流畅度和稳定性。
		stashInitialSize: 32 * 1024, // 初始缓存大小。单位：字节。建议针对直播：调整为1024kb
		stashInitialTime: 0.2, // 缓存初始时间。单位：秒。建议针对直播：调整为200毫秒
		seekType: 'range', // 建议将其设置为“range”模式，以便更快地加载视频数据，提高视频的实时性。
		lazyLoad: false, //关闭懒加载模式，从而提高视频的实时性。建议针对直播：调整为false
		lazyLoadMaxDuration: 0.2, // 懒加载的最大时长。单位：秒。建议针对直播：调整为200毫秒
		deferLoadAfterSourceOpen: false // 不预先加载视频数据，在 MSE（Media Source Extensions）打开后立即加载数据，提高视频的实时性。建议针对直播：调整为false
	})
}
onMounted(() => {
	var video= document.querySelector('#myvideo')
	player.attachMediaElement(video as any)
	player.load()
})
const playLive = () => {
	player.play()
}
const handleAnimation=()=>{
    onSend('系统消息',`${name}点亮了爱心`)
}
</script>

<style scoped>
video {
	width: 100vw;
	position: fixed;
	height: 100%;
}
</style>
